import React,{Component} from 'react';
import {Breadcrumb,Input,Button,notification} from 'antd';
import service from '../lib/service';
import './css/binomial.css';
class CalculationBinomial extends Component{
    state={
        k:0,
        n:0,
        result:{
            result_rec: 0,
            time_rec: "",
            result_mem: 0,
            time_mem: "",
            result_iter: 0,
            time_iter: ""
        }
    }
    

    handleCalculation(){
        // console.log(1)
        if (this.state.k === '0' || this.state.n === '0' || this.state.k > this.state.n){
            notification.warning({
                key: '参数错误',
                message: '很抱歉',
                description: '请检查您的输入的参数是否正确..'
            });
            return ;
        }
        let param = {};
        param.k = this.state.k;
        param.n = this.state.n;
        console.log(param)
        service.binomial(param).then((res)=>{
            notification.success({
                key: '计算成功',
                message: '结果已计算完毕',
                description: '请查看..'
            });
            this.setState({result:res.data});
            console.log(res);
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    setK(e){
        let k = parseInt(e.target.value,0)
        this.setState({k:k})
    }

    setN(e){
        let n = parseInt(e.target.value,0);
        this.setState({n:n})
    }

    render(){
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 560 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>递归算法</Breadcrumb.Item>
                  <Breadcrumb.Item>二项式计算</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">完成二项式公式计算，即Ckn=Ck−1n−1+Ckn−1Cnk=Cn−1k−1+Cn−1k. 公式解释：为了从n个不同元素中抓取k个元素(CknCnk)，可以这样考虑，如果第一个元素一定在结果中，那么就需要从剩下的n-1个元素中抓取k-1个元素(Ck−1n−1Cn−1k−1)；如果第一个元素不在结果中，就需要从剩下的n-1个元素中抓取k个元素(Ckn−1Cn−1k)。 
要求分别采用以下方法计算，并进行三种方法所需时间的经验分析。</p>
                    <ul style={{paddingLeft:"50px",lineHeight:'35px'}}>
                        <li>1.直接采用递归算法 </li>
                        <li>2.采用备忘录方法</li>
                        <li>3.采用迭代算法 </li>
                    </ul>
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">此题的难点在于备忘录法和迭代法
备忘录法需要一个数组存储已经访问过的数值，每次即将需要递归计算的时候判断是否已经计算过，若计算过则直接返回数组值。
迭代法的有多种计算方法，此题中采用先计算排列的值，再除以k的阶乘最后返回结果，但由于数据类型有上限，当数字太大时会发生数据错误
</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值</p>
                    <div className="calculation">
                        k: <Input onChange={(e)=>this.setK(e)} size="small" placeholder="输入k值" />
                        n: <Input onChange={(e)=>this.setN(e)} size="small" placeholder="输入n值" />
                        <Button onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    {!!this.state.result? <div className="calculation">
                        <div style={{marginLeft:10}}>递归算法 计算结果: {this.state.result.result_rec}  所耗时间: {this.state.result.time_rec}</div>
                        <div style={{marginLeft:10}}>备忘录递归 计算结果: {this.state.result.result_mem} 所耗时间: {this.state.result.time_mem}</div>
                        <div style={{marginLeft:10}}>迭代算法 计算结果: {this.state.result.result_iter} 所耗时间: {this.state.result.time_iter}</div>
                    </div>:<div className="calculation"></div>}
                </div>
              </div>
            </div>
        )
    }
}


export default CalculationBinomial;